<template>
	<div class="tab-all">
		<div class="tab-h">
			<div class="tab-nav">
				<div>"{{ paperContent }}"</div>
			</div>
		</div>

		<div class="scoll-navs">
			<div class="scoll-h" v-for="(item, index) in list" :key="index">
				<div class="tab-boxes">
					<div class="tab-type" v-if="item.type == 1">单选题</div>
					<div class="tab-type" v-if="item.type == 2">多选题</div>
					<div class="tab-title">{{ index + 1 }}丶{{ item.name }}</div>

					<div v-if="item.type == '1'">
						<div class="vue-flex tab-box" v-for="(k, s) in item.option" :key="s">
							<div class="tab-id" :class="k.check == true ? 'tab-active' : ''" @click="choose(index, s, item.type)">{{ k.answer }}</div>
							<div>{{ k.title }}</div>
						</div>
					</div>
					<div v-else-if="item.type == '2'">
						<div class="vue-flex tab-box" v-for="(k, s) in item.option" :key="s">
							<div class="tab-id" :class="k.check == true ? 'tab-active' : ''" @click="choose(index, s, item.type)">{{ k.answer }}</div>
							<div>{{ k.title }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tab-b">
			<div>
				<img class="tab-icon" src="../../../../assets/img/a10.png" alt="" />
				<div class="tab-font">{{ date }}</div>
			</div>
			<div @click="submit()">
				<img class="tab-icon" src="../../../../assets/img/a11.png" alt="" />
				<div class="tab-font">交卷</div>
			</div>
			<div @click="show = true">
				<img class="tab-icon" src="../../../../assets/img/a12.png" alt="" />
				<div class="tab-font">答题卡</div>
			</div>
		</div>

		<el-dialog title="提示" :visible.sync="show" width="30%" center>
			<div class="base-boxes">
				<div class="base-nav" v-for="(item, index) in checkedList" :key="index">
					<div class="base-box" :class="item.choose ? 'base-active' : ''">{{ index + 1 }}</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="show = false">返 回</el-button>
				<el-button type="primary" @click="submit()">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
let timer;
import { examSubject, commitExam } from '../../../../network/api';
export default {
	name: 'examination',
	data() {
		return {
			winHeight: '', //窗口高度
			show: false, //答题卡是否显示

			paperId: '', //id
			paperContent: '', //标题

			currentTab: 0, //预设默认选中的题目索引

			list: [],
			checkedList: [],
			date: '00:00', //考试倒计时分钟
			timeUse: 0, //共用时
			examLength: 0, //总时长

			isFalse: true //手动离开页面是否需要提交
		};
	},
	created() {},
	mounted() {
		// 上个页面的参数 id
		// console.log(this.$route.query.id);
		this.paperId = this.$route.query.id;
		let param = {
			paperId: this.$route.query.id
		};
		examSubject(param).then(res => {
			// console.log(res);
			let list = res.retData.subjectVo;
			let checkedList = [];
			list.forEach(item => {
				let str = {
					id: item.id,
					choose: ''
				};
				checkedList.push(str);
			});
			// console.log(checkedList)
			this.list = list;
			this.checkedList = checkedList;
			this.paperContent = res.retData.paperContent;
			this.paperId = res.retData.paperId;
			this.examLength = res.retData.examLength * 60;
			//定时任务开启
			this.countTime(res.retData.examLength);
		});
	},
	methods: {
		choose(index1, index2, type) {
			console.log(index1, index2, type);

			let list = this.list;
			let checkedList = this.checkedList;

			// 先判断是否是单选
			if (type == 1) {
				list[index1].option.forEach(item => {
					item.check = false;
				});
				list[index1].option[index2].check = true; //修改当前题目状态
				checkedList[index1].choose = list[index1].option[index2].answer; //当前题目单选选中赋值
			} else if (type == 2) {
				//判断多选
				list[index1].option[index2].check = !list[index1].option[index2].check; //修改当前题目状态
				let datas = [];
				list[index1].option.forEach(item2 => {
					//当前题目多选选中
					if (item2.check == true) {
						datas.push(item2.answer);
					}
				});
				checkedList[index1].choose = datas.toString(); //当前题目多选选中赋值
			}
			console.log(checkedList);
			// console.log(list)

			this.list = list;
			this.checkedList = checkedList;
		},
		// 倒计时
		countTime(time) {
			var that = this;
			var leftTime = parseInt(time) * 60; // 45分钟转化成秒
			var timeUse = 0;
			// console.log(leftTime)
			timer = setInterval(() => {
				//获取当前时间
				timeUse += 1;
				leftTime = leftTime - 1;
				let h = Math.floor((leftTime / 60 / 60) % 24); //时
				let m = Math.floor((leftTime / 60) % 60); //分
				let s = Math.floor(leftTime % 60); //秒
				if (s < 10) {
					s = '0' + s;
				}
				if (m < 10) {
					m = '0' + m;
				}
				if (h < 10) {
					h = '0' + h;
				}
				let time = h + ':' + m + ':' + s;

				that.date = time;
				that.timeUse = timeUse;
				// console.log(that.date);
				if (time == '00:00:00') {
					// if (time == '09:59:57') {
					clearInterval(timer); //清除定时器

					that.handOver(3); //自动提交试卷

					this.$alert('考试时间已到，自动提交试卷！！！', '提示', {
						confirmButtonText: '确定',
						showClose: false,
						callback: action => {
							this.$router.push({ path: '/ykt/test' });
						}
					});
				}
			}, 1000);
		},
		// 秒转时分秒
		getTime(time) {
			let h = Math.floor((time / 60 / 60) % 24); //时
			let m = Math.floor((time / 60) % 60); //分
			let s = Math.floor(time % 60); //秒
			if (s < 10) {
				s = '0' + s;
			}
			if (m < 10) {
				m = '0' + m;
			}
			if (h < 10) {
				h = '0' + h;
			}
			return h + '时' + m + '分' + s + '秒';
		},

		// 提交
		submit() {
			var that = this;
			// console.log(this.checkedList)
			for (let i = 0; i < this.checkedList.length; i++) {
				console.log(this.checkedList[i].choose);
				if (!this.checkedList[i].choose || this.checkedList[i].choose == '') {
					this.$confirm('您还有题目未完成，确定交卷吗？', '交卷', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
						.then(() => {
							that.show = false;
							that.handOver(1);
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '已取消'
							});
						});
					return;
				}
			}
			this.$confirm('答题完成，确定交卷吗？', '交卷', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					that.handOver(1);
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
		},

		// 交卷
		handOver(num) {
			// console.log(this.checkedList)
			// console.log(this.paperId)
			var that = this;
			// 用时
			let useTime = '';
			if (num == 3) {
				useTime = that.getTime(that.examLength);
			} else {
				useTime = that.getTime(that.timeUse);
			}
			let datas = {
				userId: localStorage.getItem('userid'),
				useTimeLength: useTime,
				paperId: that.paperId,
				examAnswer: JSON.stringify(this.checkedList)
			};
			commitExam(datas).then(res => {
				// console.log(res);
				that.$message({
					message: '提交成功',
					type: 'success'
				});
				if (num == 1) {
					that.isFalse = false //离开页面不再调用
					setTimeout(function() {
						that.$router.push({path:'/ykt/test'})
					}, 1000);
				}
			});
		}
	},
	beforeDestroy() {
		console.log('離開');
		clearInterval(timer); //清除定时器
		if (this.isFalse) {
			this.handOver(2); //自动提交试卷
		}
	}
};
</script>
<style lang="scss" scoped>
.tab-all {
	position: relative;

	/* 顶部 */
	.tab-h {
		height: 50px;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		line-height: 40px;
		background: #f7f7f7;
		font-size: 16px;
		white-space: nowrap;
	}

	.tab-nav {
		background-color: #ffffff;
		color: #999999;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		padding: 1.5px 15px;
	}

	/* 中间滑动展示习题 */
	.scoll-navs {
		height: 55vh;
	}
	.scoll-h {
		margin: 25px 0;
		box-sizing: border-box;
	}

	.tab-boxes {
		margin: 12px 15px;
		font-size: 15px;
		color: #000000;
	}

	.tab-type {
		background-color: #dcdee2;
		font-size: 12px;
		border-radius: 14px;
		padding: 5px 16px;
		width: 68px;
	}

	.tab-title {
		word-wrap: break-word;
		text-align: justify;
		text-justify: inter-ideograph;
		margin: 7px 0;
		line-height: 160%;
	}

	.tab-box {
		line-height: 200%;
		margin-bottom: 10px;
	}

	.tab-id {
		font-size: 14px;
		text-align: center;
		line-height: 36px;
		width: 36px;
		height: 36px;
		margin-right: 10px;
		border-radius: 50%;
		box-shadow: #e1e1e1 0px 0px 1px 1px inset;
	}

	.tab-active {
		background-color: #2964a5;
		color: #ffffff;
	}

	/* 底部 */
	.tab-b {
		position: fixed;
		width: 900px;
		box-sizing: border-box;
		border-top: 3px solid #f4f4f4;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 3px;
	}
	.tab-icon {
		width: 20px;
		height: 20px;
	}
	.tab-font {
		font-size: 14px;
		color: #000000;
	}

	/* 遮挡层 */
	.base-boxes {
		// height: 75vh;
		overflow-y: auto;
		padding: 8px 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.base-nav {
		margin: 1.81%;
		height: 36px;
		width: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.base-box {
		height: 36px;
		width: 36px;
		text-align: center;
		line-height: 36px;
		border-radius: 50%;
		background-color: #dcdee2;
		color: #ffffff;
	}

	.base-active {
		background-color: #2964a5;
	}

	.base-back {
		// position: absolute;
		// bottom: 75px;
		// left: 15px;
		// right: 15px;
		background-color: #999999;
		color: #ffffff;
		font-size: 16px;
		border-radius: 25px;
		padding: 11px 0;
		text-align: center;
		margin: 0px 300px;
		margin-top: 200px;
	}
	.base-smit {
		// position: absolute;
		// bottom: 20px;
		// left: 15px;
		// right: 30rpx;
		background-color: #2964a5;
		color: #ffffff;
		font-size: 16px;
		border-radius: 25px;
		padding: 11px 0;
		text-align: center;
		margin: 20px 300px;
	}
}
</style>
